@import '@/styles/variables.scss';
.chat-list {
  $size: map-get($spaces, sm);
  .chat-item {
    display: flex;
    align-items: center;
    gap: map-get($spaces, xs);
    border-radius: $radius;
    border: solid 1px map-get($border-colors, dark);
    padding: 0 $size;
    background: $white-color;
    cursor: pointer;
    & + .chat-item {
      margin-top: map-get($spaces, xs);
    }

    &.active,
    &:hover {
      border-color: map-get($theme-colors, primary);
      color: map-get($theme-colors, primary);
      background: rgba(map-get($theme-colors, primary), 0.1);
    }

    .icon {
      color: map-get($theme-colors, primary) !important;
      
      :deep(.u-iconfont) {
        color: map-get($theme-colors, primary) !important;
      }
    }

    .icon-btn {
      display: none;
    }
    .content {
    }
  }

  

  .chat-item:hover{
    .icon-btn {
      display: block;
    }
  }

  .chat-item-primary {
    background: map-get($theme-colors, primary );
    color: $white-color;
    display: flex;
    align-items: center;
    gap: map-get($spaces, xs);
    border-radius: $radius;
    border: solid 1px map-get($border-colors, dark);
    padding: 0 $size;

    cursor: pointer;

    .icon {
      color: $white-color !important;
      
      :deep(.u-iconfont) {
        color: $white-color !important;
      }
    }
  }
}